I. Start with the interface from Homework 2.
In this assignment, you need to make the dummy form that you created in Homework 2 function. a. How to: i. Create a Homework 3 folder by backing up your existing Homework 2 directory ii. Rename the new directory Homework iii. Start up Visual Studio iv. On the Visual Studio menu bar, navigate to File->Open ->Web Site… v. In the new dialogue box, navigate to your new Homework 3 Directory, press Open vi. Once your website is opened, you are now ready to begin Assignment 3. Let’s follow the steps given to us from Dr. Currim
II. Confirm all the textboxes, drop down menu and buttons have meaningful identifiers a. How to: i. In the Solution Explorer (Shortcut: CTRL + ALT + L) make open the calculator file. (mine was named Default.aspx) ii. Check you have a Default.aspx.cs / Filename.aspx.cs (NOT Default.aspx.vb) in solution explorer. 1. If you see .vb, do the following: a. Right click on root folder in the Solution Explorer and choose "Add New Item". b. Select "Web Form" and choose language "Visual C#" (and ensure place code in a separate file is ticked) c. Go to view source of your earlier file (probably Default.aspx) and copy everything from <html> to </html> d. View source code of NEW file. e. Paste the contents to replace everything from <html> to </html> f. Run it using F5 to confirm that no errors exist g. Delete the old files
iii. Click on your first item, which in my case is a text box. iv. Switch to the Design View (Shortcut CTRL + 7 ) and in the lower right hand corner of the screen, you will see a Properties menu fill with information about the object you have selected. v. In the Properties menu, under MISC make sure the (ID) section has something written in it (not just textbox or something. I chose to name mine txtinput1 but you can identify it with whatever you want. vi. Do this for all items on your calculator. This will help you when you’re scripting to give a name to each of your inputs and variables. III. Add validation controls for both the numbers a. How to: i. On the left hand side of the screen, open up the Tool Box (CTRL + ALT + X) menu. ii. For our calculator, we need to make both fields required. Drag the RequiredFieldValidator tool into the form, as shown in the picture. iii. Now we’ll use our unique identifiers that we created in the previous step. 1. Select the RequiredFieldValidator you just placed in the form from your Tool Box. 2. Go to the Properties menu, and find the field “ControlToValidate” 3. Enter the identifier (name) that you created. I put my txtinput1 ID here. 4. Repeat steps 1-3 for the second text box. iv. In addition, you need to restrict the second number to be greater than zero to avoid the divide by zero error. We all know only Chuck Norris can do this. 1. Drag the “RangeValidator” from the Tool Box 2. b. Also, you want to make sure that the first number is always entered in numeric form
Notes:
- The validators should generate "Useful" error messages. Not, "RequiredValidator1".
- Also, the validation messages should display on the right of the relevant field.
- Validation should only be done when the calculate button is pressed
2) Run and test it (Step 12-13) c. 3) You need to add the operators in the drop down menu, i.e., "+", "-", "/" and "*". [hint: a) refer to figure 2.17 to see the usage of theItems.Addfunction for drop down lists or b) refer to figure 6.11 on page 223 to see the usage ofListItem] [refer to steps 14 and 15]
4) You need to add events for Calculate and Clear button [refer to steps 16 -18]
a) The Clear function will resemble the book example very closely. The only difference is which fields need to be cleared.
b) The Calculate function will be a little different.
Here is the LOGIC of how to do it (ASP independent):
i) Get the number the user typed in each of the text boxes, convert it to numbers and save it in two variables (which can handle real numbers like 1.99, 5.7 not just integers like 4, 5)
ii) Get the operation that the user selected and store it in a third variable
iii) Perform the required operation for the two numbers and save it in a new variable
a) To be able to perform the operation, you need to check what operation was chosen..
(Hint: You can use multipleifstatements each with anEqualsoperator to do this)
iv) Copy the results of the variable to the Results label
6) Play with EnableViewState, EnableClientScript [refer to steps 19-21]
a) Your final application should maintain state unless the Clear button is pressed
b) Your final application should validate on the Client if it is supported (when Calculate button is pressed)
In this assignment, you need to make the dummy form that you created in Homework 2 function.
a. How to:
i. Create a Homework 3 folder by backing up your existing Homework 2 directory
ii. Rename the new directory Homework
iii. Start up Visual Studio
iv. On the Visual Studio menu bar, navigate to File->Open ->Web Site…
v. In the new dialogue box, navigate to your new Homework 3 Directory, press Open
vi. Once your website is opened, you are now ready to begin Assignment 3. Let’s follow the steps given to us from Dr. Currim
II. Confirm all the textboxes, drop down menu and buttons have meaningful identifiers
a. How to:
i. In the Solution Explorer (Shortcut: CTRL + ALT + L) make open the calculator file. (mine was named Default.aspx)
ii. Check you have a Default.aspx.cs / Filename.aspx.cs (NOT Default.aspx.vb) in solution explorer.
1. If you see .vb, do the following:
a. Right click on root folder in the Solution Explorer and choose "Add New Item".
b. Select "Web Form" and choose language "Visual C#" (and ensure place code in a separate file is ticked)
c. Go to view source of your earlier file (probably Default.aspx) and copy everything from <html> to </html>
d. View source code of NEW file.
e. Paste the contents to replace everything from <html> to </html>
f. Run it using F5 to confirm that no errors exist
g. Delete the old files
iii. Click on your first item, which in my case is a text box.
iv. Switch to the Design View (Shortcut CTRL + 7 ) and in the lower right hand corner of the screen, you will see a Properties menu fill with information about the object you have selected.
v. In the Properties menu, under MISC make sure the (ID) section has something written in it (not just textbox or something. I chose to name mine txtinput1 but you can identify it with whatever you want.
vi. Do this for all items on your calculator. This will help you when you’re scripting to give a name to each of your inputs and variables.
III. Add validation controls for both the numbers
a. How to:
i. On the left hand side of the screen, open up the Tool Box (CTRL + ALT + X) menu.
ii. For our calculator, we need to make both fields required. Drag the RequiredFieldValidator tool into the form, as shown in the picture.
iii. Now we’ll use our unique identifiers that we created in the previous step.
1. Select the RequiredFieldValidator you just placed in the form from your Tool Box.
2. Go to the Properties menu, and find the field “ControlToValidate”
3. Enter the identifier (name) that you created. I put my txtinput1 ID here.
4. Repeat steps 1-3 for the second text box.
iv. In addition, you need to restrict the second number to be greater than zero to avoid the divide by zero error. We all know only Chuck Norris can do this.
1. Drag the “RangeValidator” from the Tool Box
2.
b. Also, you want to make sure that the first number is always entered in numeric form
Notes:
- The validators should generate "Useful" error messages. Not, "RequiredValidator1".
- Also, the validation messages should display on the right of the relevant field.
- Validation should only be done when the calculate button is pressed
2) Run and test it (Step 12-13)
c. 3) You need to add the operators in the drop down menu, i.e., "+", "-", "/" and "*". [hint: a) refer to figure 2.17 to see the usage of the Items.Add function for drop down lists or b) refer to figure 6.11 on page 223 to see the usage of ListItem] [refer to steps 14 and 15]
4) You need to add events for Calculate and Clear button [refer to steps 16 -18]
a) The Clear function will resemble the book example very closely. The only difference is which fields need to be cleared.
b) The Calculate function will be a little different.
Here is the LOGIC of how to do it (ASP independent):
i) Get the number the user typed in each of the text boxes, convert it to numbers and save it in two variables (which can handle real numbers like 1.99, 5.7 not just integers like 4, 5)
ii) Get the operation that the user selected and store it in a third variable
iii) Perform the required operation for the two numbers and save it in a new variable
a) To be able to perform the operation, you need to check what operation was chosen..
(Hint: You can use multiple if statements each with an Equals operator to do this)
iv) Copy the results of the variable to the Results label
6) Play with EnableViewState, EnableClientScript [refer to steps 19-21]
a) Your final application should maintain state unless the Clear button is pressed
b) Your final application should validate on the Client if it is supported (when Calculate button is pressed)
7) Upload to server